<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParam"
                       :labelCol="{ span: 10 }"
                       :wrapperCol="{ span: 14 }"
                       @on-search="search"
                       @on-reset="onReset"
            />
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          />
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script>
export default {
  name: "content-manage"
}
</script>
<script setup>
import { page } from "@/api/module/content-manage"
import { reactive, ref, onActivated } from 'vue'
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { filterEmptyByObject } from '@/tools/common'
const { t } = useI18n();

const router = useRouter()
const tableRef = ref()

const fetch = async (param) => {
  const response = await page(param)
  return {
    data: response.data.record || [],
    total: response.data.total
  };
};

const columns = [
  { dataIndex: "category", key: "category", title: "类别" },
  { dataIndex: "explains", key: "explains", ellipsis: true, title: "说明" },
  { dataIndex: "updateTime", key: "updateTime", title: "修改时间" },
]

const operate = [
  {
    label: "编辑",
    event: function (record) {
      router.push({
        path: '/system/content-manage/edit',
        query: { id: record.id || '' }
      })
    }
  },
]

const searchParam = reactive([
  { key: "title", type: "input", label: "关键字", placeholder: '请输入' },

])
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};
const search = function (value) {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
  };
};
const onReset = function () {
  state.param = {};
};

const state = reactive({
  selectedRowKeys: [],
  param: {},
})
onActivated(() => {
  tableRef.value.reload()
})
// 分页参数
const pagination = { pageNum: 1, pageSize: 10 };
</script>

<style scoped>

</style>
